浅析Vue响应式原理（二）

Vue响应式原理之Observer

之前简单介绍了Dep和Watcher类的代码和作用，现在来介绍一下Observer类和set/get。在Vue实例后再添加响应式数据时需要借助Vue.set/vm.$set方法，这两个方法内部实际上调用了set方法。而Observer所做的就是将修改反映到视图中。

Observer

export class Observer {
  value: any;
  dep: Dep;
  vmCount: number; // number of vms that has this object as root $data

  constructor (value: any) {
    this.value = value
    this.dep = new Dep()
    this.vmCount = 0

    def(value, '__ob__', this)
    if (Array.isArray(value)) {
      const augment = hasProto
        ? protoAugment
        : copyAugment
      augment(value, arrayMethods, arrayKeys)
      this.observeArray(value)
    } else {
      this.walk(value)
    }
  }

  walk (obj: Object) {
    const keys = Object.keys(obj)
    for (let i = 0; i < keys.length; i++) {
      defineReactive(obj, keys[i])
    }
  }

  observeArray (items: Array<any>) {
    for (let i = 0, l = items.length; i < l; i++) {
      observe(items[i])
    }
  }
}

Observer有三个属性。value是响应式数据的值；dep是Dep实例，这个Dep实例用于Vue.set/vm.$set中通知依赖更新；vmCount表示把这个数据当成根data对象的实例数量，大于0时是实例化传入的根data对象。

构造函数接受一个值，表示要观察的值，这样，在Observer实例中引用了响应式数据，并将响应式数据的__ob__属性指向自身。如果被观察值是除数组以外的类型，会调用walk方法，令每个属性都是响应式。对于基本类型的值，Object.keys会返回一个空数组，所以在walk内，defineReactive只在对象的属性上执行。如果是被观察值是数组，那么会在每个元素上调用工厂函数observe，使其响应式。

对于数组，响应式的实现稍有不同。回顾一下在教程数组更新检测里的说明，变异方法会触发视图更新。其具体实现就在这里。arrayMethods是一个对象，保存了Vue重写的数组方法，具体重写方式下面再说，现在只需知道这些重写的数组方法除了保持原数组方法的功能外，还能通知依赖数据已更新。augment的用途是令value能够调用在arrayMethods中的方法，实现的方式有两种。第一种是通过原型链实现，在value.__proto__添加这些方法，优先选择这种实现。部分浏览器不支持__proto__，则直接在value上添加这些方法。

最后执行observeArray方法，遍历value，在每个元素上执行observe方法。

数组变异方法的实现

执行变异方法会触发视图功能，所以变异方法要实现的功能，除了包括原来数组方法的功能外，还要有通知依赖数据更新的功能。代码保存在/src/core/observer/array.js。

const arrayProto = Array.prototype
export const arrayMethods = Object.create(arrayProto)
const methodsToPatch = [
  'push',
  'pop',
  'shift',
  'unshift',
  'splice',
  'sort',
  'reverse'
]
methodsToPatch.forEach(function (method) {
  const original = arrayProto[method]
  def(arrayMethods, method, function mutator (...args) {
    const result = original.apply(this, args)
    const ob = this.__ob__
    let inserted
    switch (method) {
      case 'push':
      case 'unshift':
        inserted = args
        break
      case 'splice':
        inserted = args.slice(2)
        break
    }
    if (inserted) ob.observeArray(inserted)
    // notify change
    ob.dep.notify()
    return result
  })
})

模块内，使用arrayProto保存数组原型，arrayMethods的原型是arrayProto，用来保存变异后的方法，methodsToPatch是保存变异方法名的数组。

遍历methodsToPatch，根据方法名来获取在arrayProto上的数组变异方法，然后在arrayMethods实现同名方法。

在该同名方法内，首先执行缓存的数组方法original，执行上下文是this，这些方法最终会添加到响应式数组或其原型上，所以被调用时this是数组本身。ob指向this.__ob__，使用inserted指向被插入的元素，调用ob.observeArray观察新增的数组元素。最后执行ob.dep.notify()，通知依赖更新。

observe

工厂函数，获取value上__ob__属性指向的Observer实例，如果需要该属性且未定义时，根据数据创建一个Observer实例，在实例化时会在value上添加__ob__属性。参数二表示传入的value是否是根data对象。只有根数据对象的__ob__.vmCount大于0。

isObject判断value是不是Object类型，实现如obj !== null && typeof obj === 'object'。

export function observe (value: any, asRootData: ?boolean): Observer | void {
  if (!isObject(value) || value instanceof VNode) {
    return
  }
  let ob: Observer | void
  if (hasOwn(value, '__ob__') && value.__ob__ instanceof Observer) {
    ob = value.__ob__
  } else if (
    shouldObserve &&
    !isServerRendering() &&
    (Array.isArray(value) || isPlainObject(value)) &&
    Object.isExtensible(value) &&
    !value._isVue
  ) {
    ob = new Observer(value)
  }
  if (asRootData && ob) {
    ob.vmCount++
  }
  return ob
}

此处可以看出，value与Observer实例ob之间是双向引用。value.__ob__指向ob,ob.value指向value。

Vue.set

在Vue实例化以后，如果想为其添加新的响应式属性，对于对象，直接使用字面量赋值是没有效果的。由响应式数据的实现可以想到，这种直接赋值的方式，并没有为该属性自定义getter/setter，在获取属性时不会收集依赖，在更新属性时不会触发更新。如果想要为已存在的响应式数据添加新属性，可以使用Vue.set/vm.$set方法，但要注意，不能在data上添加新属性。

Vue.set/vm.$set内部都是在/src/code/observer/index.js定义的set的函数。

set函数接受三个参数，参数一target表示要新增属性的对象，参数二key表示新增的属性名或索引，参数三val表示新增属性的初始值。

export function set (target: Array<any> | Object, key: any, val: any): any {
  if (process.env.NODE_ENV !== 'production' &&
    !Array.isArray(target) &&
    !isObject(target)
  ) {
    warn(`Cannot set reactive property on non-object/array value: ${target}`)
  }
  if (Array.isArray(target) && isValidArrayIndex(key)) {
    target.length = Math.max(target.length, key)
    target.splice(key, 1, val)
    return val
  }

  if (key in target && !(key in Object.prototype)) {
    target[key] = val
    return val
  }
  const ob = (target: any).__ob__
  if (target._isVue || (ob && ob.vmCount)) {
    process.env.NODE_ENV !== 'production' && warn(
      'Avoid adding reactive properties to a Vue instance or its root $data ' +
      'at runtime - declare it upfront in the data option.'
    )
    return val
  }
  // 不存在ob 说明不是响应式数据
  if (!ob) {
    target[key] = val
    return val
  }
  // 为target添加新属性
  defineReactive(ob.value, key, val)
  // ob.dep实际是target.__ob__.dep
  ob.dep.notify()
  return val
}

函数内部首先判断target类型，非数组或非对象的目标数据是无法添加响应式数据的。

如果是数组，且key是有效的数组索引，更新数组长度，然后调用变异方法splice，更新对应的值并触发视图更新。如果是对象，且属性key在target的原型链上且不在Object.prototype上（即不是Object原型上定义的属性或方法），直接在target上添加或更新key。

令ob指向target.__ob__，如果target是Vue实例或是根data对象(ob.vmCount > 0)，则无法新增数据，直接返回。

接着处理能为target添加属性的情况。不存在ob时，说明不是响应式数据，直接更新target。否则，执行defineReactive函数为ob.value新增响应式属性，ob.value实际指向target，添加之后调用ob.dep.notify()通知观察者重新求值，ob是Observer实例。

总结一下，set的内部逻辑：

当target是数组时，更新长度，调用变异方法splice插入新元素即可。

当target是对象时：

• key在除Object.prototype外的原型链上时，直接赋值
• key在原型链上搜索不到时，需要新增属性。如果target无__ob__属性，说明不是响应式数据，直接赋值。否则调用defineReactive(ob.value, key, val)观察新数据，同时触发依赖。

Vue.delete

删除对象的属性。如果对象是响应式的，确保删除能触发更新视图。

Vue.delete实际指向del。del接受两个参数，参数一target表示要删除属性的对象，参数二key表示要删除的属性名。

如果target是数组且key对于的索引在target中存在，使用变异方法splice方法直接删除。

如果target是Vue实例或是根data对象则返回，不允许在其上删除属性。key不是实例自身属性时也返回，不允许删除。如果是自身属性则使用delete删除，接着判断是否有__ob__属性，如果有，说明是响应式数据，执行__ob__.dep.notify通知视图更新。

export function del (target: Array<any> | Object, key: any) {
  if (process.env.NODE_ENV !== 'production' &&
    !Array.isArray(target) &&
    !isObject(target)
  ) {
    warn(`Cannot delete reactive property on non-object/array value: ${target}`)
  }
  // 数组 直接删除元素
  if (Array.isArray(target) && isValidArrayIndex(key)) {
    target.splice(key, 1)
    return
  }
  const ob = (target: any).__ob__
  if (target._isVue || (ob && ob.vmCount)) {
    process.env.NODE_ENV !== 'production' && warn(
      'Avoid deleting properties on a Vue instance or its root $data ' +
      '- just set it to null.'
    )
    return
  }
  // 属性不在target上
  if (!hasOwn(target, key)) {
    return
  }
  delete target[key]
  // 不是响应式数据
  if (!ob) {
    return
  }
  ob.dep.notify()
}

小结

关于Observer类和set/get的源码已经做了简单的分析，细心的读者可能会有一个问题：target.__ob__.dep是什么时候收集依赖的。答案就在defineReactive的源码中，其收集操作同样在响应式数据的getter中执行。

至于defineReactive的源码解析，在后面的文章再做分析。

参考链接

• Vue技术内幕|揭开数据响应系统的面纱
• Vue源码